<template> 
	<view class="user-home">
        <base-common></base-common>
        <div class="head">
            <page-head
                class="title_words" 
                checkPlatform="false" 
                title="我的" 
                fColor="#191A1A" 
                style="color: #ffffff;" 
                icon="none" 
                url="/pages/index/index"/>
                <!-- bColor="linear-gradient(90deg, rgb(251 231 236, 0.2) 45%, rgba(150 193 232, 0.6) 100%)"  -->
            <div class="user-info">
                <div class="user-cont">
                    <button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar"><!-- open-type="chooseAvatar" @chooseavatar="onChooseAvatar" -->
                        <image :src="userImage"></image>
                        <div v-if="showRotate" class="load-icon"><uni-icons type="loop" color="#cccccc" size="25"></uni-icons></div>
                    </button>
                    <div class="user-detail">
                        <div class="user" @click="edit">
                            <label class="user-name">{{ userInfo.nickName || '' }}</label>
                            <image class="edit-info" src="@/static/edit-info.png"/>
                        </div>
                        <label class="phone">{{ userInfo.currentStudentCode ? userInfo.currentStudentCode : userInfo.hideMobile }}</label>
                    </div>
                </div>
                <div class="bind-user" @click="toStudentListPage">
                    <label>{{userInfo.isBind?'管理学员号':'绑定学员号'}}</label>
                    <uni-icons type="forward" color="#FD453D" size="12"></uni-icons>
                </div>
            </div>
			<div class="page-content ">
			    <div class="flex-space-between line-menu" @click="goPractice()">
			        <div class="flex-space-between">
			            <image style="width: 27rpx; height: 28rpx; margin-right: 20rpx;" src="@/static/record.png"></image><label>练习记录</label>
			        </div>
			        <uni-icons type="forward" color="#676767" size="18" style="margin-right: -9rpx;"></uni-icons>
			    </div>
			</div>
			<div class="page-content ">
			    <div class="flex-space-between line-menu" @click="goMessage()">
			        <div class="flex-space-between">
			            <image style="width: 27rpx; height: 28rpx; margin-right: 20rpx;" src="@/static/icon-msg.png"></image><label>我的消息</label>
			        </div>
			        <div class="flex">
                        <text class="message" v-if="messageNum">{{formatNum(messageNum)}}</text>
                        <uni-icons type="forward" color="#676767" size="18" style="margin-right: -9rpx;"></uni-icons>
                    </div>
			    </div>
			</div>
            <!-- <div class="head-bottom"></div> -->
            <div class="page-content ">
                <div class="flex-space-between line-menu" @click="goCorrentError()">
                    <div class="flex-space-between">
                        <image style="width: 27rpx; height: 28rpx; margin-right: 20rpx;" :src="feedback"></image><label>意见反馈</label>
                    </div>
                    <uni-icons type="forward" color="#676767" size="18" style="margin-right: -9rpx;"></uni-icons>
                </div>
            </div>
        </div>
        <!--div class="page-content flex-space-between">
            <div class="flex-space-between menu-blank pick" @click="goCollection()">
                <div class="menu-text">我的收藏</div>
                <div class="img-back-color">
                    <image style="width: 52rpx; height: 52rpx;" :src="`${imgPreFix()}/ic_mine_collect.png`"></image>
                </div>
            </div>
            <div class="flex-space-between menu-blank blue" @click="goRecord()">
                <div class="menu-text">我的练习记录</div>
                <div class="img-back-color img-back-color-blue">
                    <image style="width: 52rpx; height: 52rpx;" :src="`${imgPreFix()}/ic_mine_practice_record.png`"></image>
                </div>
            </div>
        </div-->
        
        
        <div v-if="test">
        	<div style="height: 50px;line-height: 50px; padding-top: 150px;">token:
        		<input :value="token"/>
        	</div>
        </div>
        <div class="logout" @click="handleLogout">
            <div class="btn">退出登录</div>
        </div>
    </view>
</template>

<script>
    import { apiSaveUserInfo, apiGetUserInfo } from '@/api/user/user.js'
	import {apiMyMsgCount} from '@/api/message'
    import {imgPreFix} from '@/common/util/util'
    import {
        mapActions
    } from "vuex"
    export default {
        components:{
            
        },
        computed: {
            
        },
        data() {
            return {
                test: false,
                token: '',
                userInfo: {},
                defaultName: '',
                showRotate: false,
                userImage: `${imgPreFix()}/ic_mine_default_avatar@2x.png`,
                feedback: `${imgPreFix()}/ic_mine_feedback.png`,
                messageNum: 0 // 未读消息数
            }
        },
        onShow() {
            this.token = uni.getStorageSync('Access-Token')
            if(process.env.NODE_ENV == 'development') {
                this.test = true
            }
            this.getUserInfo()
            this.getMessageCount()
            wx.setBackgroundColor({
                backgroundColor: '#f5f7fa', // 窗口的背景色为白色
            })
        },
        onHide() {
        },
        created() {
        },
        methods: {
            ...mapActions(["Logout"]),
            imgPreFix,
            getUserInfo() {
                apiGetUserInfo().then((res) => {
                    if (res.code === 200) {
                        this.userInfo = res.data
                        if (this.userInfo.nickName) {
                            this.defaultName = this.userInfo.nickName
                        }
                        if (this.userInfo.avatar) {
                            this.userImage = this.userInfo.avatar
                        }
                    }
                })
            },
            handleLogout() {
                this.Logout()
                uni.switchTab({
                    url: '/pages/index/index'
                })
            },
            toStudentListPage() {
                uni.navigateTo({
                    url: '/pages/bindStudentCode/studentList'
                })
            },
            toLogin() {
                uni.redirectTo({
                    url: '/pages/login/login'
                })
            },
            goCollection(){
                uni.navigateTo({
                    url: '/pages/exam/collection'
                })
            },
            goRecord(){
                uni.navigateTo({
                    url: '/pages/exam/myRecord'
                }) 
            },
            goCorrentError(){
                uni.navigateTo({
                    url: '/pages/user/correctError'
                })
            },
            // 去我的消息
            goMessage(){
                uni.navigateTo({
                    url: '/pages/message/index'
                })
            },
            goPractice(){
                // 去练习
                uni.navigateTo({
                    url: '/pages/user/practiceListPage'
                })
            },

            // 获取总未读消息数
            getMessageCount(){
                apiMyMsgCount().then((res) => {
                    if(res.code == 200){
                        this.messageNum = res.data.total || 0
                    }
                }).catch(err => {
                    console.log(err, 'err')
                })
            },
            formatNum(num){
                return num > 99 ? '99+' : num
            },
            onChooseAvatar(e) {
                const { avatarUrl } = e.detail 
                // this.userImage = avatarUrl
                
                
                let Authorization = uni.getStorageSync('Access-Token')
                let url = ''
                if(process.env.NODE_ENV == 'development'){
                url = "https://bjielts-t.test.xdf.cn/test-api/user/save/avatar"
                } else {
                url = "https://bjielts.xdf.cn/prod-api/user/save/avatar"
                }
                const _this = this
                
                this.$tip.loading('上传中');
                this.showRotate = true
                wx.uploadFile({
                        url: url,
                        filePath: avatarUrl,
                        header: {
                            u2at: Authorization
                        },
                        name: 'file',
                        formData: {
                            'user': 'test'
                        },
                        success (res){
                            console.log(res, '上传成功---------------')
                            // _this.$tip.loaded();
                            // _this.showRotate = false
                            // const data = JSON.parse(res.data);
                            // _this.userImage = data.data
                            // _this.saveUserInfo('', data.data)
                        },
                        complete(res){
                            console.log(res, '上传完成---------------')
                            _this.$tip.loaded();
                            _this.showRotate = false
                            const data = JSON.parse(res.data);
                            if(data.code == 200){
                                _this.userImage = ''
                                _this.$nextTick(() => {
                                    _this.userImage = data.data
                                    console.log('图片上传成功，调用保存接口', data.data)
                                    _this.saveUserInfo('', data.data)
                                })
                            }else {
                                _this.$tip.toast(data.msg)
                            }
                        }
                    })
            },
            saveNickName() {
                if (this.defaultName) {
                    this.saveUserInfo(this.defaultName)
                }
            },
            saveUserInfo(nickName, avatar) {
                console.log('保存接口调用了', avatar)
                apiSaveUserInfo({
                    openId: this.userInfo.openId,
                    unionId: this.userInfo.unionId,
                    avatar: avatar,
                    nickName: nickName
                }).then((res) => {
                    
                })
            },
            
            // 跳编辑信息页
            edit(){
                uni.navigateTo({
                    url:'/pages/user/editUserInfo'
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    @function torem($rpx){  //$rpx为需要转换的字号
        @return #{$rpx * 100 / 750 / 4}rem; 
    }
    .user-home {
        background: url('https://jxfwpt-p.oss-cn-beijing.aliyuncs.com/practice/ielts/static/img/user_background.png') no-repeat;
        background-size: 100%;
        background-color: #F6F7FB;
        height: 100%;
    }
	.head {
        position: relative;
        // background: linear-gradient(to right, rgb(252, 231, 236) 9%, rgb(226, 242, 252) 71%);
        height: torem(416);
        .head-bottom {
            width:100%; 
            height: torem(50); 
            position: absolute; 
            left: 0; 
            bottom: torem(-10); 
            // background-color: red;
            background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, RGBA(246, 247, 251, 0.9) 100%);
            // filter: blur(5px);
        }
	}
    .user-info {
        border-radius: torem(20);
        color: #ffffff;
        margin: 0 auto;
        margin-top: torem(40);
        padding: 0 torem(32);
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: torem(70);
        .user-cont {
            display: inline-flex;
            align-items: center;
            flex: 1;
            min-width: 0;
            .avatar-wrapper {
            	width: torem(114) !important;
            	height: torem(114) !important;
            	border-radius: torem(50);
            	margin: 0;
            	padding: 0;
                border: none;
                background: rgba(255, 255, 255, 0);
                position: relative;
                image {
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                }
            }
            .load-icon {
                position: absolute;
                left: 0;
                top: 0;
                background-color: rgba(255, 255, 255, 0.3);
                width: torem(114);
                height: torem(114);
                z-index: inherit;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 50%;
                animation: rotate 2s linear infinite;
            }
            @keyframes rotate {
                0% {
                    transform: rotate(0deg);
                  }
                  100% {
                    transform: rotate(360deg);
                  }
            }
            .avatar-wrapper::after {
                border: none;
            }
            .user-detail {
                padding-left: torem(20);
                font-size: torem(28);
                color: #191A1A;
                display: inline-flex;
                flex-direction: column;
                flex: 1;
                min-width: 0;
                margin-right: torem(30);
                .user{
                    display: inline-flex;
                    align-items: center;
                }
                .user-name{
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
                
                .edit-info{
                    width:torem(24);
                    height:torem(24);
                    margin-left: torem(15);
                    flex-shrink: 0;
                }
                .phone {
                    color: #999999;
                    font-size: torem(24);
                    line-height: 30px;
                }
            }
        }
        .bind-user {
            font-size: torem(24);
            color: #FD453D;
            display: inline-flex;
            align-items: center;
        }
    }
    .page-content {
        padding: 0 torem(30);
        width: calc(100% - torem(60));
        position: relative;
		margin-bottom: torem(15);
    }
    .flex-space-between {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .menu-blank {
        height: torem(100);
        border-radius: torem(20);
        // padding: 20rpx 0;
        width: calc(50% - torem(10));
        font-size: torem(28);
        color: #333333;
        .menu-text {
            padding-left: torem(20);
        }
        .img-back-color {
            width: torem(116);
            height: torem(100);
            background: #FFE9E2;
            border-radius: torem(40) torem(20) torem(20) torem(40);
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        .img-back-color-blue {
            background-color: #D8E6FF;
        }
    }
    .pick {
        background-color: #FFF3EA;
        
    }
    .blue {
        background: #F1F6FF;
    }
    .line-menu {
        color: #333333;
        font-size: torem(28);
        height: torem(99);
        background-color: #ffffff;
        padding: 0 torem(20);
        border-radius: torem(10);

        .message{
            width: torem(40);
            height: torem(40);
            background-color: #FD453D;
            color: #fff;
            font-size: torem(18);
            border-radius: 50%;
            text-align: center;
            line-height: torem(40);
            margin-right: torem(19);
            display: inline-block;
        }
    }
    .flex{
        display: flex;
        align-items: center;
    }
    
    .logout {
        position: fixed;
        left: 0;
        bottom: torem(70);
        padding: 0 torem(30);
        width: calc(100% - 60rpx);
        .btn {
            border: 1px solid #FD453D;
            height: torem(82);
            line-height: torem(82);
            text-align: center;
            border-radius: torem(41);
            width: 100%;
            color: #FD453D;
            font-size: torem(28);
        }
    }
</style>
